<template>
    <div class="store-detail">
        <div class="pics-wrapper">
            <!--:height="200"-->
            <van-swipe :autoplay="3000" indicator-color="" :height="swipeHeight" class="swipe">
                <van-swipe-item v-for="item,index in storePics" :key="index"><img class="swipe-img" :src="item"
                                                                                  v-lazy="item">
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="brief-info">
            <!-- 两端对齐 -->
            <van-row type="flex" justify="space-between">
                <van-col span="7">
                    <div class="logo-info">
                        <img class="" :src="storeDetail.logo">
                    </div>
                </van-col>
                <van-col span="17">
                    <div class="station-info">
                        <p>{{storeDetail.storeName}}</p>
                        <p>地址：{{location}}</p>
                    </div>
                </van-col>
            </van-row>
        </div>
        <div class="detail-info">
            <div class="switch-item">
                <van-row>
                    <van-col span="8" :class="swichItemStatus?'active':''">
                        <p @click="swichItem(true)">介绍</p>
                    </van-col>
                    <van-col span="8" :class="!swichItemStatus?'active':''">
                        <p @click="swichItem(false)">图片</p>
                    </van-col>
                </van-row>
            </div>
            <div class="switch-panel">
                <div class="intro-wrapper" v-show="swichItemStatus">
                    <div class="intro-item" v-for="item,index in detailInfos" :key="index">
                        <van-row>
                            <van-col span="10">
                                <div class="intro-text"><i></i><span>{{item.title}}</span></div>
                            </van-col>
                            <van-col span="14">
                                <div class="intro-value" :class="(index==(detailInfos.length-1))?'pb50':''">
                                    {{item.value}}
                                </div>
                            </van-col>
                        </van-row>
                    </div>
                </div>
                <!--:src="item"    v-lazy="item"-->
                <div class="photo-wrapper" v-show="!swichItemStatus">
                    <img class="preview-img"
                         v-for="item,key in goodsPics"
                         :key="key"
                         :src="item"
                         @click="showGoodPic(key)"
                    >
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    const DETAIL_INFOS = [
        {key: 'discountInfo', "title": "会员折扣", value: ''},
        {key: 'averagecost', "title": "人均消费", value: '', unit: '元/人'},
        {key: 'businessHours', "title": "营业时间", value: ''},
        {key: 'area', "title": "商户面积", value: '', unit: '㎡'},
        {key: 'chargePerson', "title": "联系人", value: ''},
        {key: 'tel', "title": "联系电话", value: ''},
        {key: 'email', "title": "电子邮箱", value: ''},
        {key: 'description', "title": "商户介绍", value: ''}
    ]
    import Vue from 'vue';
    import {Lazyload} from 'vant';
    import {ImagePreview} from 'vant';
    import {isDev, getScaleHeight, getScaleHeightByRate} from "../../utils/tools";

    Vue.use(Lazyload);
    export default {
        name: "StoreDetail",
        data() {
            return {
                /*状态*/
                swichItemStatus: true,
                swipeHeight: 200
            }
        },
        mounted() {
            //console.log("storeDetail",this.storeDetail)
            let _height = getScaleHeight(".pics-wrapper");
            this.swipeHeight = _height
        },
        computed: {
            storeDetail: {
                get() {
                    return this.$store.state.stores.storeDetail
                },
                set(val) {
                    this.$store.state.stores.storeDetail = val
                }
            },
            location() {
                let station = this.storeDetail.station || ''
                return this.storeDetail.floor + " " + station
            },
            goodsPics() {
                let goodsPicsStr = this.storeDetail.goodsPics
                if (goodsPicsStr && goodsPicsStr.length > 0) {
                    let goodsPics = goodsPicsStr.split(',')
                    return goodsPics
                }
                return []
            },
            storePics() {
                let storePicsStr = this.storeDetail.storePics
                if (storePicsStr && storePicsStr.length > 0) {
                    let storePics = storePicsStr.split(',')
                    return storePics;
                }
                return []
            },
            detailInfos() {
                let detailInfos = DETAIL_INFOS
                let map = this.storeDetail
                detailInfos.forEach(item => {
                    let val = map[item.key]
                    if (item.key == 'businessHours' && map['endTime'] && map['startTime']) {
                        item.value = map['endTime'] + ' - ' + map['startTime']
                    }
                    if (val) {
                        item.value = val + (item.unit || '')
                    }
                })
                detailInfos = detailInfos.filter(item => {
                    return item.value.length > 0
                })
                return detailInfos
            }
        },
        methods: {
            swichItem(status) {
                this.swichItemStatus = status
            },
            showGoodPic(index) {
                // const imagePreview =
                let _this = this
                let instance = ImagePreview({
                    images: _this.goodsPics,
                    startPosition: index,
                    showIndex: true,
                    onClose() {
                        instance = null
                    }
                    // lazyLoad:true
                })
            }
        },
        beforeDestroy() {
            this.storeDetail = null
            this.$store.commit("SET_STORE_DETAIL", null)
        }
    }
</script>

<style lang="less" scoped>
    @import "../../assets/less/base";
    .store-detail {
        width: 100%;
        min-height: 100%;
        background-color: @main-background-color;
        .pics-wrapper {
            /*height: 200px;*/
            .swipe-img {
                width: 100%;
            }
        }
        .brief-info {
            border-bottom: 1px solid #e3e3e3;
            .logo-info {
                width: 80px;
                height: 80px;
                padding: 5px 0 0 20px;
                img {
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                }
            }
            .station-info {
                p {
                    color: #7697b3;
                    padding-left: 20px;
                    .fw();
                    /*text-align: center;*/
                    &:last-child {
                        .fw(400);
                        .fz(14px)
                    }
                }

            }
        }
        .detail-info {
            .switch-item {
                .van-col {
                    /*box-sizing: border-box;*/
                    p {
                        /*margin-top: 0;*/
                        /*margin-bottom: 0;*/
                        margin: 10px auto;
                        text-align: center;
                        color: @main-theme-color;
                    }
                }
                .van-col.active {
                    background-color: #d6e0e8;
                    border-top: 2px solid @main-theme-color;
                }

            }
            .switch-panel {
                padding: 0 10px;
                margin-bottom: 50px;
                .intro-wrapper {
                    .intro-item {
                        height: 20px;
                        margin: 20px 0;
                        .intro-text {
                            height: 20px;
                            line-height: 20px;
                            padding: 2px 0;
                            /*color: @main-theme-color;*/
                            color: @front-font-color;
                            i {
                                vertical-align: top;
                                display: inline-block;
                                height: 20px;
                                line-height: 20px;
                                width: 3px;
                                background: url("/images/weixin2/hbg1.png") no-repeat;
                                /*background-color: @main-theme-color;*/
                                /*border-radius: 20%;*/
                            }
                            span {
                                padding-left: 10px;
                            }
                        }
                        .intro-value {
                            padding: 2px 0;
                            color: @front-font-color;
                            word-wrap: break-word;
                        }
                        .intro-value.pb50 {
                            padding-bottom: 50px;
                        }
                    }
                }
                .photo-wrapper {
                    .preview-img {
                        width: 80px;
                        margin: 10px 5px;
                    }
                }

            }
        }
    }
</style>
